<template>
  <div class="spare-table">
    <div class="flex justify-between padding-l-20 padding-r-20 margin-b-10">
      <div class="left">备件更换清单</div>
      <div class="right">出库单号: <span class="word cursor-pointer" @click="toSpare">{{ spareData.number }}</span></div>
    </div>
    <q-table
      :data="tableData"
      :columns="tableColumns"
      row-key="id"
      class="myTable scroll"
      :loading="isTableLoading"
      :pagination.sync="pagination"
      :hide-bottom="tableData.length > 0"
      no-data-label="暂无数据"
      style="max-height: 300px"
      color="primary"
    >
      <template v-slot:body-cell-index="props">
        <q-td>
          {{ props.row.__index + 1 }}
          <div v-show="false">{{setSparePrice}}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-useCount="props">
        <q-td class="" style="padding: 14px 5px 0 0" v-if="isShowCount">
          <yz-input
            v-model="props.row.useCount"
            style="width: 120px"
            :rules="[0, 7]"
            :maxlength="4"
          />
          <!--              :hintRule="setInspectQuantityRules(props.row)"-->
        </q-td>
        <q-td v-else>
          {{props.row.useCount}}
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script>
export default {
  rname: 'spare-table',
  props: {
    isShowCount: Boolean,
    spareData: {
      default: () => {
        return {
          number: '',
          spareParts: []
        }
      },
      type: Object
    }
  },
  computed: {
    setSparePrice () {
      const price = this.tableData && this.tableData.reduce((num, item) => {
        num = (Number(num) + Number(item.useCount) * Number(item.sparePartPrice)).toFixed(2)
        return num
      }, 0)
      this.$emit('setPrice', price)
      return price || 0
    }
  },
  data () {
    return {
      tableData: this.spareData.spareParts || [],
      isTableLoading: false,
      tableColumns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'sparePartNumber', label: '备件编号', align: 'left', field: 'sparePartNumber' },
        { name: 'sparePartName', label: '备件名称', align: 'left', field: 'sparePartName' },
        {
          name: 'sparePartCategory',
          label: '所属分类',
          align: 'left',
          field: 'sparePartCategory'
        },
        { name: 'sparePartSpec', label: '规格', align: 'left', field: 'sparePartSpec' },
        { name: 'outCount', label: '出库数量', align: 'left', field: 'outCount' },
        { name: 'useCount', label: '消耗数量', align: 'left', field: 'useCount' }
      ],
      pagination: {
        rowsNumber: 0 // 总条数
      }
    }
  },
  methods: {
    toSpare () {}
  }
}
</script>
<style lang="scss">
.spare-table{
  .left{
    font-weight: bold;
  }
  .word{
    color: #027BE3;
  }
}
</style>
